<template>
  <div class="search">
    <f-form ref="form" :action="api.specs" :form-key="this.formItem.specsId">
      <f-form-item label="规格名称" name="specsName" :required="true" :value="formItem.specsName"/>
      <f-form-item label="规格描述" name="specsDesc" :required="true" :value="formItem.specsDesc"/>
      <f-form-item label="是否规格" name="sku" type="switch" :value="Boolean(formItem.sku)"/>
      <f-form-item label="启用状态" name="state" type="radio"  :required="true"  :data="api.common.showState" :value="formItem.state"/>
      <f-form-item label="展示方式" type="radio" name="specsType"  :required="true" :value.sync="formItem.specsType" :data="api.specs.specsType"/>
      <f-form-item type="other" label="规格选项">
        <template v-for="(item,index) in options">
          <a-input placeholder="规格值" style="width: 50%;" v-model="item.name">
            <f-color-picker slot="addonAfter" v-model="item.value" @change="(color)=>headleChangeColor(color,item)" v-if="formItem.specsType==1"></f-color-picker>
          </a-input>
          <a-icon class="dynamic-delete-button" type="minus-circle-o" @click="() => remove(index)" v-if="index>0"/>
          <br>
        </template>
      </f-form-item>
      <f-form-item type="other" style="margin-left: 105px">
        <a-button type="dashed" style="width: 50%" @click="add">
          <a-icon type="plus"/>
          添加规格项
        </a-button>
      </f-form-item>
    </f-form>
  </div>
</template>

<script>
  export default {
    name: 'specsForm',
    props: {},
    data () {
      return {
        isAdd: true,
        options: [{ name: '', value: '' }],
        formItem: this.getFormItem()
      }
    },
    methods: {
      getFormItem () {
        return {
          state: 1,
          specsType: 2
        }
      },
      add () {
        this.options.push({ name: '', value: '' })
      },
      remove (index) {
        this.options.splice(index, 1)
      },
      headleChangeColor (color, item) {
        console.log(item)
        item.name = color.label
      },
      setData (data) {
        this.$refs.form.resetFields()
        this.formItem = this.getFormItem()
        this.isAdd = true
        this.options = [{ name: '', value: '' }]
        if (data && data.specsId) {
          this.formItem = data
          this.options = JSON.parse(data.specsOption)
          this.isAdd = false
        }
      },
      handleSubmit () {
        console.log(this.options)
        this.$refs.form.submit({ specsOption: JSON.stringify(this.options) })
      }
    },
    computed: {},
    created () {

    },
    components: {}
  }
</script>

<style rel="stylesheet/less">
  .dynamic-delete-button {
    cursor: pointer;
    margin-left: 5px;
    position: relative;
    top: 4px;
    font-size: 24px;
    color: #999;
    transition: all 0.3s;
  }

  .dynamic-delete-button:hover {
    color: #777;
  }

  .m-colorPicker .box[data-v-11842410] {
    width: 220px;
  }

  .dynamic-delete-button[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }
</style>
